<template>
  <div class="tab-list-container">
    <div class="tab-nav-wrap">
      <ul class="tab-nav bid-flex">
        <li class="nav-item left-slot" v-if="headerData.leftSlot">
          {{ headerData.leftSlot }}
        </li>
        <li
          v-for="(item, index) in headerData.navData"
          :class="activeNav(item)"
          :key="index"
          @click="onNavClick(item)"
          class="nav-item"
        >
          {{ item.text }}
        </li>
        <li class="nav-item right-slot" v-if="headerData.rightSlot">
          <span class="more-news" v-if="headerData.rightSlot == 'text'"
            >更多
            <!-- <span>更多</span>
              <img src="../assets/icon/nav_item_more.png" alt="" srcset="" /> -->
          </span>
          <div class="searh-panel" v-else-if="headerData.rightSlot == 'search'">
            <input class="s-input" type="text" name="" />
            <span class="s-btn">搜索</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="tab-content-wrap">
      <div v-for="item in 8" :key="item" class="news-item bid-flex">
        <p class="i-title" :class="iconName(headerData.leftSlot)">
          {{ headerData.leftSlot.repeat(8) }}
        </p>
        <p v-if="headerData.time">{{ headerData.time }}</p>
      </div>
      <div
        class="more-content-btn-wrap"
        v-if="headerData.rightSlot == 'search'"
      >
        <span class="m-btn">查看更多</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tab-list-slot",
  props: {
    headerData: {
      type: Object,
      required: true
    }
  },
  data() {
    var tempId = 0;
    if (this.headerData.navData[0]) {
      tempId = this.headerData.navData[0].id;
    }
    return {
      active: tempId,
      newsTitle: ["中招协组织集体收看庆祝中国共产党成立100周年大会"]
    };
  },
  methods: {
    onNavClick(data) {
      if (data && data.id) this.active = data.id;
    },
    activeNav(item) {
      if (item && item.id) {
        return item.id == this.active ? "active" : "none";
      }
    },
    iconName(name) {
      switch (name) {
        case "通知公告":
          return "inform-notice";
        case "新闻资讯":
          return "news-info";
        case "政策法规":
          return "policy-laws";
        case "招标公告":
          return "bid-notice";
        case "品牌榜单":
          return "brand-list";
        default:
          return "";
      }
    }
  }
};
</script>
<style scoped>
.tab-nav-wrap {
  background-color: #f0f0f0;
}

.left-slot,
.right-slot,
.nav-item {
  height: 0.44rem;
  padding: 0 0.17rem;
  line-height: 0.44rem;
  font-size: 0.16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item {
  color: #1571ba;
  text-align: center;
  border-top: 0.02rem solid #1571ba;
  border-bottom: 0.01rem solid #ddd;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

.left-slot {
  color: #fff;
  font-size: 0.18rem;
  /* border-top: 0.01rem solid #1571ba; */
  border-bottom: 0.01rem solid #1571ba;
  background-color: #1571ba;
}

.right-slot {
  padding: 0;
  text-align: right;
}

.tab-nav .nav-item:last-child {
  flex: 2;
  border-right: 0.01rem solid #ddd;
}

.tab-nav .nav-item.active {
  padding-top: 0.02rem;
  border-left: 0.01rem solid #ddd;
  border-right: 0.01rem solid #ddd;
  border-bottom: none;
  background-color: #fff;
}

.news-item {
  padding: 0 0.1rem;
  justify-content: space-between;
  height: 0.42rem;
  line-height: 0.42rem;
  font-size: 0.15rem;
  overflow: hidden;
}

.i-title {
  padding-left: 0.26rem;
  font-size: 0.15rem;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-size: 0.2rem;
  background-position: 0 0.09rem;
}

/* inform-notice news-info policy-laws bid-notice brand-list */
.i-title.inform-notice {
  background-image: url("../assets/icon/news_item_icon_1.png");
}

.i-title.news-info {
  background-image: url("../assets/icon/news_item_icon_2.png");
}

.i-title.policy-laws {
  background-image: url("../assets/icon/news_item_icon_3.png");
}

.i-title.bid-notice {
  background-image: url("../assets/icon/news_item_icon_4.png");
}

.i-title.brand-list {
  background-image: url("../assets/icon/news_item_icon_5.png");
}

.nav-item .more-news {
  display: inline-block;
  width: 0.5rem;
  height: 0.41rem;
  color: #1571ba;
  font-size: 0.14rem;
  padding-right: 0.26rem;
  background-repeat: no-repeat;
  background-size: 0.14rem;
  background-position: 0.55rem 0.13rem;
  background-image: url("../assets/icon/nav_item_more.png");
}

.more-content-btn-wrap {
  height: 0.4rem;
  text-align: right;
}

.more-content-btn-wrap .m-btn {
  display: inline-block;
  width: 1rem;
  height: 0.4rem;
  padding-right: 0.32rem;
  overflow: hidden;
  color: #666;
  font-size: 0.14rem;
  line-height: 0.4rem;
  background-repeat: no-repeat;
  background-size: 0.2rem;
  background-position: 1.02rem 0.08rem;
  background-image: url("../assets/icon/search_item_more.png");
}

.tab-content-wrap {
  overflow: hidden;
  border-left: 0.01rem solid #ddd;
  border-right: 0.01rem solid #ddd;
  border-bottom: 0.01rem solid #ddd;
}

.searh-panel {
  height: 0.43rem;
  line-height: 0.43rem;
}

.s-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0.04rem;
  border: 0.01rem solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 0.35rem;
  line-height: 0.35rem;
  outline: none;
  padding: 0 0.02rem;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 2.25rem;
}

.s-input:focus {
  outline: none;
  border-color: #409eff;
}

.searh-panel .s-btn {
  display: inline-block;
  width: 0.5rem;
  height: 0.41rem;
  margin: 0 0.1rem;
  padding-left: 0.13rem;
  color: #1571ba;
  font-size: 0.16rem;
  background-repeat: no-repeat;
  background-size: 0.2rem;
  background-position: 0 0.1rem;
  background-image: url("../assets/icon/search_news.png");
}
</style>
